<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>电子音乐</title>  
    <style>  

        /*============背景============*/
        html, body {  
            height: 100%;  
            margin: 0;  
            padding: 0;  
        }  
  
        body {  
            background: linear-gradient(to bottom right, #333333, #f84599, #b61515);  
            background-size: 400% 400%;  
            animation: gradient 15s ease infinite;  
        }  
  
        @keyframes gradient {  
            0% {  
                background-position: 0% 0%;  
            }  
            50% {  
                background-position: 100% 100%;  
            }  
            100% {  
                background-position: 0% 0%;  
            }  
        }  
        /*============背景============*/
  
        /*=============导航栏=============*/  
        .div1 {  
            width: 20px;  
            height: 100vh; 
            background-color: rgb(67, 67, 67);  
            overflow: hidden;  
            box-shadow: 5px 1px 8px rgba(69, 69, 69, 0.771);  
            position: relative;  
            transition: width 1s ease;  
        }  
  
        .div1:hover {  
            width: 150px;  
        }  
  
        ul {  
            list-style-type: none;  
            padding: 0;  
            margin: 0;  
            padding-bottom: 50px;  
        }  
  
        
        li a {  
            display: block;  
            text-decoration: none;  
            color: rgb(245, 245, 220);  
            text-align: center;  
            padding: 25px;
            padding-top: 40px;  
            transition: font-size 0.8s ease;  
        }  
  
        li a:hover {  
            background-color: rgb(0, 0, 0);  
            box-shadow: 3px 3px 3px;  
            font-size: 22px;  
        }  
  
        .arrow {  
            color: antiquewhite;  
            position: absolute;  
            bottom: 20px;  
            left: 50%;  
            transform: translateX(-50%);  
            pointer-events: none;  
        }  

        button {
            color: rgb(162, 153, 141);
            width: 20%;
            padding: 0.1%;
            margin-left: 19%;
            border: 3px solid rgb(46, 46, 46);
            border-radius: 5em;
            font-size: x-large;
            background-color: rgba(29, 29, 29, 0.407);
        }
        
        button:hover {
            color: antiquewhite;
            box-shadow:3px 3px 3px  #9b3457;
        }

        /*=============导航栏=============*/  

        /*=============内容栏=============*/

        .flex-container {
            display: flex;
            width: 91%;
            height: 100%;
            left: 5%;
            background-color: rgba(240, 248, 255, 0.23);
            position: absolute;
            flex-wrap: wrap;
        }

        .flex-item1 {
            width: 26%;
            height: 29%;
            margin: 1%;
            padding: 0.8%;
            border-radius: 5%;
            background-color: rgba(250, 235, 215, 0.266);
        }

        .flex-item2 {
            width: 65%;
            height: 5%;
            margin: 1%;
            padding: 0.8%;
            border-radius: 5em;
            background-color: rgba(29, 29, 29, 0.558);
        }

        .flex-item3 {
            width: 26%;
            height: 58%;
            margin: 1%;
            padding: 0.8%;
            border-radius: 5%;
            background-color: rgba(250, 235, 215, 0.005);
        }

        .content-box {
            position: absolute;
            left: 29.6%;
            top: 11%;
            width: 61.6%;
            height: 76.5%;
            margin: 1%;
            padding: 3%;
            border-radius: 5%;
            overflow: auto;
            background-color: rgba(250, 235, 215, 0.558);
        }

        .content-box p {  
            text-indent: 2em;  
            font-size: large;
        }

        .option1 {
            display: flex;
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
            text-align: center;
        }

        .option2 {
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            margin-left: 40px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option3 {
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option4 {
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            margin-left: 40px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option5 {
            width: 320px;
            height: 60px;
            margin: 5px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option1,  
        .option2,  
        .option3,  
        .option4,  
        .option5 {  
            transition: transform 0.3s ease;  
        } 

        .option1:hover,
        .option3:hover,
        .option5:hover {
            transform: rotate(-5deg) scale(1.2);
        }

        .option2:hover,
        .option4:hover {
            transform: rotate(7deg) scale(1.2);
        }

        img {
            width: 310px;
            height: 54px;   
            padding-top: 3px;
            padding-left: 4px;
            text-align: center;
            border-radius: 5em;
        }
        
        .word {
            position: absolute;
            top: -1%;
            left: -1%;
            width: 400px;
            height: 300px;
        }
        /*=============内容栏=============*/

        /*------------ 浮 动 -------------*/ 

        @media screen and (max-width:600px) {
            html {
                overflow: auto;
            }

            .word {
                width: 100%;
                top: -40%;
            }

            .flex-item2 {
                width: 91%;
            }

            .flex-container {
                width: 100%;
            }

            .flex-item1 {
                position: absolute;
                top:7%;
                width: 28%;
                height: 22%;
                
            }

            .flex-item3 {
                position:absolute;
                top: -14.5%;
                left: 31%;
                transform: rotate(90deg);
            }

            .content-box {
                position: absolute;
                top: 31%;
                left: 0.5%;
                width: 86%;
                height: 60%;
            }

            .option1,
            .option2,
            .option3,
            .option4,
            .option5 {
                width: 100%;
                height: 6%;
            }

            img {
                width: 90%;
                height: 70%;
            }
        }

        /*------------ 浮 动 -------------*/ 
    </style> 
</head>  
<body>  
    <div class="flex-container">
        <div class="flex-item1"><img class="word" src="./图片/Dub/Dub word.png"></div>
        <div class="flex-item2">
            <button onclick="showContent('content1')">初期</button>  
            <button onclick="showContent('content2')">发展</button>
        </div>

        <div class="flex-item3">
            <div class="option1"><a href="https://www.kugou.com/mixsong/4cohetbf.html"><img src="./图片/Dub/Dub1.png"></a></div>
            <div class="option2"><a href="https://www.kugou.com/mixsong/4iyw06d9.html"><img src="./图片/Dub/Dub2.png"></a></div>
            <div class="option3"><a href="https://www.kugou.com/mixsong/6z58va56.html?share=1"><img src="./图片/Dub/Dub3.png"></a></div>
            <div class="option4"><a href="https://www.kugou.com/mixsong/3mzxsd3a.html?fromsearch=Hysteria%20-%20Virtual%20Riot"><img src="./图片/Dub/Dub4.png"></a></div>
            <div class="option5"><a href="https://www.kugou.com/mixsong/6f0aipb5.html?fromsearch=Dimension%20Excision"><img src="./图片/Dub/Dub5.png"></a></div>
        </div>

        <div class="content-box" id="contentBox">
        </div>
    </div>

    <div class="div1">  
        <ul>  
            <li><a href="./Dubstep.html">Dubstep</a></li>  
            <li><a href="./Trance.html">Trance</a></li>  
            <li><a href="./Synwave.html">Synthwave</a></li>  
            <li><a href="./Hardcore.html">Hardcore</a></li>  
        </ul>  
        <p class="arrow">⇲</p>   
    </div>  
    
    <script>  
        var content1 = '<p>Dubstep的起源可以追溯到20世纪90年代末期的英国南伦敦的地下音乐场景，特别是在Croydon地区。这一独特的音乐风格在当时的地下夜店中孕育和发展，成为了一种新兴的电子音乐类型。</p><p>Dubstep的灵感主要来自于多种不同的音乐风格，如雷鬼、牙买加舞曲（Dub）以及二步舞曲（2-Step Garage）。音乐家们将这些音乐元素融入到了Dubstep的创作中，形成了其独特的音乐特点。Dubstep的音乐重点在于紧密的制作与不断回响的贝斯和低音鼓节拍，这些元素为音乐带来了强烈的节奏感和侵略性。此外，Dubstep还常常使用取样音乐，并偶尔会加入人声配唱，进一步丰富了其音乐表现。</p><p>Dubstep的诞生并非一蹴而就，而是经历了多年的演变和发展。最初，Dubstep的名称并不确定，有时被称为车库音乐（Garage）等。直到2002年左右，随着混音作品的增多和Dubstep音乐的广泛传播，这种音乐风格才正式被命名为“Dubstep”。</p><p>Dubstep的发展得到了多个方面的支持。其中，英国BBC一号电台的DJ John Peel是Dubstep的重要支持者之一。他在2003年开始在电台播放Dubstep音乐，为这种音乐风格的推广做出了重要贡献。此外，一些夜店和唱片店也为Dubstep的发展提供了重要的平台。例如，Forward夜店和Big Apple Records唱片店就为Dubstep的宣扬和制作人的培养提供了重要的支持。</p>';  
        var content2 = '<p>在Dubstep的发展过程中，一些代表性人物和里程碑事件起到了重要的推动作用。例如，Skream、Kode9以及Zomby等制作人在Dubstep最初的形态上进行了改动，引入了更为实验化的编排，吸引了英国主流媒体的注意力，使Dubstep在英国的影响逐渐扩大。此外，随着Dubstep的兴起，一些知名的Dubstep单曲和专辑也相继发行，如Skream的《Midnight Request Line》等。</p><p>2006年1月，英国BBC一号电台的DJ Mary Anne Hobbs开始办一个叫做「回响贝斯战争」（Dubstep Warz）的节目，Dubstep就在这时候一路往上冲，成为了英国最受欢迎的电子音乐。 2007年，Dubstep慢慢影响到流行音乐的歌曲，2011年布兰妮的冠军单曲Hold It Against Me当中加入大量Dubstep元素，之后就愈来愈多流行曲风混合了Dubstep。</p><p>在2010年左右，Dubstep开始打入美国市场并获得了广泛的关注。这主要得益于一些美国音乐人如Skrillex的引领和推动。Skrillex通过引入更为激烈和商业化的元素，形成了被称为“Brostep”的次流派，使Dubstep在美国市场上获得了空前的发展。此后，Dubstep逐渐成为了全球范围内广受欢迎的音乐风格之一。</p><p>随着Dubstep的不断发展，这一音乐风格也经历了多个阶段的演变和多元化。一方面，Dubstep逐渐与其他音乐风格融合，形成了多种分支和流派，如Brostep、Half-time Dubstep等。这些分支流派在保留Dubstep核心元素的同时，也融入了其他音乐风格的特点和元素，为Dubstep的发展注入了新的活力。另一方面，Dubstep也在不断地探索和尝试新的音乐元素和表现形式，如将人声、采样等元素融入到Dubstep的创作中，使其音乐风格更加多样化和丰富化。</p>';  
      
        window.onload = function() {  
          showContent('content1');   
        };  
      
        function showContent(contentId) {  
          var contentBox = document.getElementById('contentBox');  
          switch (contentId) {  
            case 'content1':  
              contentBox.innerHTML = content1;  
              break;  
            case 'content2':  
              contentBox.innerHTML = content2;  
              break;  
          }  
        }  
      </script> 
</body>  
</html>